{% extends "templates/base.html" %}


{% block title%}Request A Ride{% endblock %}

{% block javascript %}
<script src="/scripts/scriptaculous/1.8.1/prototype.js" type="text/javascript"></script>
<script src="/scripts/scriptaculous/1.8.1/scriptaculous.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
	// <![CDATA[

	document.observe('dom:loaded', function() {
		// add autocomplete functionaliy to source address field
		new Ajax.Autocompleter('id_source_address', 'id_source_address_choices', '/ajax/location-completer', {
			paramName: 'current_value'
		});

		// add autocomplete functionality to destiination field
		new Ajax.Autocompleter('id_destination_address', 'id_destination_address_choices', '/ajax/location-completer', {
			paramName: 'current_value'
		});

	});

	// ]]>
</script>
{% endblock %}

{% block main %}
	<h2>request a ride</h2>
	<p>
	   You can let drivers know that you want a ride by placing a ride request<br/>
	   Your request will show in <a href='/browse_riderequests'>browse ride requests</a> and you will be notified<br/>
	   when it is accepted. You can cancel the ride request if it is accepted, otherwise it will expire automatically
	    on the date you enter.
	</p>
	<form method="post">

		{{ riderequest_form.non_field_errors }}

		<div class="inputgroup">
			<div>
				{{ riderequest_form.source_address.errors }}
				{{ riderequest_form.source_address.label_tag }}
				{{ riderequest_form.source_address }}
			</div>
			<div id="id_source_address_choices" class="address_autocomplete" style="display: none;"></div>

			<div>
				{{ riderequest_form.destination_address.errors }}
				{{ riderequest_form.destination_address.label_tag }}
				{{ riderequest_form.destination_address }}
			</div>
			<div id="id_destination_address_choices" class="address_autocomplete" style="display: none;"></div>
		</div>
		<div id="id_destination_address_choices" class="address_autocomplete" style="display: none;"></div>

		<div class="inputgroup">
			<div>
				{{ riderequest_form.date.errors }}
				{{ riderequest_form.date.label_tag }}
				{{ riderequest_form.date }}
			</div>

			<div>
				{{ riderequest_form.departure_time.errors }}
				{{ riderequest_form.departure_time.label_tag }}
				{{ riderequest_form.departure_time }}
			</div>

			<div>
				{{ riderequest_form.arrival_time.errors }}
				{{ riderequest_form.arrival_time.label_tag }}
				{{ riderequest_form.arrival_time }}
			</div>
		</div>

		<div class="inputgroup">
    		<div>
				<strong>{{ riderequest_form.notes.label }}<strong>
				{{ riderequest_form.notes }}
			</div>
		</div>

		<p>
			<input type="hidden" name="_do_create_riderequest" value="True"/>
			<input class="button" type="submit" value="Create"/>
		</p>

	</form>
{% endblock %}
